<!--
  标准表单弹窗组件
  @author YangMiao 1939724848@qq.com
  @date   2021/12/14 10:12
-->
<template>
  <mieLayer
    :layer-title="layerTitle"
    :show-layer="showLayer"
    :width="layerWidth"
    :fullscreen="fullscreen"
    :is-show-cancel-btn="isShowCancelBtn"
    :is-show-submit-btn="isShowSubmitBtn"
    @rightTopBtnClose="rightTopBtnClose"
    @clickLayerOperateCloseBtn="clickLayerOperateCloseBtn"
    @clickLayerOperateSubmit="clickLayerOperateSubmit"
    @closed="closed"
  >
    <!--  表单前  -->
    <el-row>
      <slot name="form-before" />
    </el-row>
    <!--  搜索表单  -->
    <el-row>
      <el-form ref="searchFormRef" :label-width="labelWidth" :inline="formLine">
        <slot name="search-form" />
      </el-form>
    </el-row>
    <!--  内容表单  -->
    <el-row>
      <el-form ref="layerFormRef" :model="layerOperateform" :rules="layerOperateRules" :label-width="labelWidth" :inline="formLine">
        <slot name="form-content" />
      </el-form>
    </el-row>
    <!--  内容表单后  -->
    <el-row :gutter="20">
      <slot name="form-after" />
    </el-row>
    <!--  分页  -->
    <el-row style="margin-top: 20px">
      <slot name="page" />
    </el-row>
  </mieLayer>
</template>

<script>
import mieLayer from './MIE-EL-Layer'
export default {
  name: 'MIEELFormLayer',
  components: {
    mieLayer
  },
  props: {
    // 弹窗标题
    layerTitle: {
      type: String,
      default: '数据弹窗'
    },
    // 弹窗是否显示
    showLayer: {
      type: Boolean,
      default: false
    },
    // 弹窗宽度
    layerWidth: {
      type: String,
      default: '40%'
    },
    // 表单内容
    layerOperateform: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 表单校验
    layerOperateRules: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 表单label宽度
    labelWidth: {
      type: String,
      default: '150px'
    },
    /**
     * 是否为全屏dialog
     * @author YangMiao
     * @date   2021/5/16 13:50
     */
    fullscreen: {
      type: Boolean,
      default: false
    },
    /**
     * 表单内容是否 行显示
     * @author YangMiao 1939724848
     * @date   2021/7/29 17:27
     */
    formLine: {
      type: Boolean,
      default: false
    },
    /**
     * 是否显示取消按钮
     * @author YangMiao 1939724848@qq.com
     * @date   2021/9/16 12:21
     */
    isShowCancelBtn: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示提交按钮
     * @author YangMiao 1939724848@qq.com
     * @date   2021/9/16 12:21
     */
    isShowSubmitBtn: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    /**
     * 重置表单数据
     * @author YangMiao
     * @date   2021/7/7 1:06
     */
    resetFormData() {
      this.$refs.layerFormRef.resetFields()
    },
    /**
     * 弹窗销毁回调
     */
    rightTopBtnClose(done) {
      this.resetFormData()
      this.$emit('rightTopBtnClose', done)
    },
    /**
     * 点击了弹窗取消按钮
     */
    clickLayerOperateCloseBtn() {
      this.resetFormData()
      this.$emit('clickLayerOperateCloseBtn')
    },
    /**
     * 点击了弹窗确认按钮
     */
    clickLayerOperateSubmit() {
      this.$refs.layerFormRef.validate(valid => {
        if (valid) {
          this.$emit('clickLayerOperateSubmit')
        }
      })
    },
    /**
     * 弹窗关闭后的回调 第二个函数回调执行了就会重置表单
     * @author YangMiao 1939724848@qq.com
     * @date   2021/11/12 16:14
     */
    closed() {
      this.$emit('closed', () => {
        this.resetFormData()
      })
    }
  }
}
</script>

<style scoped>

</style>
